<template>
	<view class="e-p-l-20 e-p-r-20">
		<view class="e-flex tab bg-white">
			<!-- :class="{'tab-active':tabIndex === 1}" -->
			<view class="e-p-30 text-center e-rela fw-600" @tap="tabIndex = 1">
				{{ $t('classify.商品介绍') }}
			</view>
			<!-- <view class="e-p-30 text-center e-rela e-flex-1 fw-600" @tap="tabIndex = 2" :class="{'tab-active':tabIndex === 2}">
				{{$t('classify.规格参数')}}
			</view> -->
		</view>
		<view class="content">
			<view class="ql-container ql-snow">
				<view class="ql-editor">
					<e-parse :content="richText"></e-parse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		info: Object
	},
	data() {
		return {
			tabIndex: 1
		};
	},
	computed: {
		richText() {
			return this.info?.description?.detailRichTextMobile
				? this.info.description.detailRichTextMobile.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display: block;" ')
				: '';
		}
	}
};
</script>
<style scoped lang="scss">
.tab {
	border-radius: 20rpx 20rpx 0 0;
	> view {
		&:first-child {
			&::after {
				// content: '';
				position: absolute;
				width: 2rpx;
				height: 48rpx;
				background: #e3e4e6;
				right: 0;
				top: calc(50% - 24rpx);
			}
		}
	}
	.tab-active {
		&::before {
			content: '';
			position: absolute;
			width: 64rpx;
			height: 6rpx;
			background: var(--color-primary);
			border-radius: 3rpx;
			bottom: 0;
			left: calc(50% - 32rpx);
		}
	}
}
.content {
	min-height: 316rpx;
}
</style>
